
<template>
    <div id="video_bd">
        <div class="video">
            <video :src='videoDetail.video_url' controls="controls"></video>
            <p class="title">{{videoDetail.title}}</p>
            <div class="author">
                <div class="avatar_img">
                    <img :src="videoDetail.avatar">
                </div>
                <div class="username">{{videoDetail.author_name}}</div>
            </div>
        </div>
        <div class="look">
            <div class="look_img">
                <img :src="pro_rec.logo">
            </div>
            <div class="look_desc">
                <p class="look_tle">{{pro_rec.title}}</p>
                <p class="look_summary">{{pro_rec.summary}}</p>
                <span class="look_btn">看一看</span>
            </div>
        </div>
        <div id="commentBox">
            <div class="comment" v-for="list in comment" :key="list.comment">
                <div class="avtar">
                    <img :src="list.avatar" width="36" height="36" class="avtar_img">
                    <img src="../assets/talk.png" class="talk">
                </div>
                <div class="comment-content">
                    <p class="avtar-name">
                        <span>{{list.username}}</span>
                    </p>
                    <p class="comments">
                        <!-- <img src="../assets/shuijiao.jpg">
                    <img src="../assets/shuijiao.jpg">
                    <img src="../assets/shuijiao.jpg"> -->
                        {{list.content}}
                    </p>

                    <p class="comment-time">
                        <span>{{list.ctime}}</span> ·
                        <span>回复&gt; </span>
                    </p>
                </div>
            </div>
        </div>
        <ul class="ul-pic" style="padding:0 10px;margin-bottom:10px">
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.leoliu.cin" target="_blank" class="open">查看更多，下载天化云应用</a>
        </ul>
    </div>
</template>
<style>

</style>


<script>
export default {
    name: 'app',
    data() {
        return {
            comment: [],
            videoDetail: [],
            pro_rec:[],
            id:this.$route.query.id
        }
    },
    mounted() {
        this.loadVideodetail();
        this.loadComment()
    },
    methods:{
    loadVideodetail:function(){
       //var id=this.$refs.hide.innerHTML;
       var id=this.id;
        this.$http.get('http://thy.588net.com/index.php/article/Article/get_info?'+'&id='+id).then(function(res){
            this.videoDetail=res.body.data.article;
            this.pro_rec=res.body.data.product;
            console.log(this.videoDetail);
        })
    },
    loadComment: function() {
      this.$http.get('http://thy.588net.com/index.php/question/Question/getPostList?' + '&page=' + 1 + '&page_size=' + 8).then(function(res) {
        this.comment = res.body.data;

      })
    }
  },
}
</script>

<style scoped>
.title {
    padding: 10px
}

.avatar_img {
    width: 36px;
    margin-right: 10px;
    float: left
}

.avatar_img img {
    width: 36px;
    height: 36px;
    border-radius: 18px
}

#video_bd {
    padding-top: 60px
}

.author {
    overflow: hidden;
    padding: 0 10px;
    margin-bottom:5px
}

video {
    width: 100%;
    height: 250px;
  background:#000
}

.username {
    float: left;
    height: 36px;
    line-height: 36px
}

.comments img:nth-of-type(3n) {
    margin-right: 0;
}

.avtar {
    margin-right: 10px;
    width: 36px
}
.look {
    display: flex;
    flex-direction: row;
    border: 1px solid #d8d8d8;
    height: 70px;
    margin: 0 10px;
    position: relative;
    background: #f5f5f5
}
.open {
    display: block;
    margin-top: 30px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    background: #307ed7;
    color: #fff;
    font-size: 13px;
    border-radius: 4px;
}
.look_img {
    width: 70px;
    height: 70px;
    margin-right: 10px;
}

.look_img img {
    width: 70px;
    height: 70px;
}

.look_tle {
    color: #5a5a5a;
    font-size: 14px
}

.look_summary {
    color: #c24e4c;
    font-size: 12px
}

.look_desc {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 70px;
    width: 100%
}

.look_btn {
    position: absolute;
    display: block;
    padding: 2px 10px;
    right: 10px;
    bottom: 6px;
    border: 1px solid #d8d8d8;
    font-size: 14px;
    color: #c24e4c;
}
.comment {
    border-top: 1px solid #d8d8d8;
    color: #5a5a5a;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: hidden;
    padding: 10px;
}

.avtar_img {
    width: 36px;
    height: 36px;
    border-radius: 18px;
}

.talk {
    width: 20px;
    height: 20px;
    float: right;
}

.comment-content {
    width: 100%;
}

.avtar-name {
    height: 36px;
    line-height: 36px;
    font-size: 12px;

    overflow: hidden;
    color: #5a5a5a;
}

.avtar-name span:nth-of-type(1) {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}

.comments {
    text-align: justify;
    font-size: 14px;
    line-height: 24px;
    color: #5A5A5A;
    overflow: hidden;
}

.comments img {
    width: 31.6%;
    margin-right: 2.6%;
    float: left;
    height: 60px;
}

.comment-time {
    font-size: 12px;
    color: gray;
    margin-top: 6px;
    height: 1rem;
    line-height: 20px;
}
</style>

